<template>
  <div>
    <el-col style="padding-bottom: 30px">
      <p style="font-size: 30px">服务器监控</p>
      <div class="state_green"></div>
      正常
      <div class="state_yellow"></div>
      繁忙
      <div class="state_red"></div>
      爆满
      <div class="state_null"></div>
      维护
      <el-col>
        <el-divider/>
        <p>双线一区</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '双线一区'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}
            </el-card>
          </template>
        </el-col>
      </el-col>
      <el-col>
        <el-divider/>
        <p>双线二区</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '双线二区'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}
            </el-card>
          </template>
        </el-col>
      </el-col>

      <el-col>
        <el-divider/>
        <p>双线四区</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '双线四区'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}
            </el-card>
          </template>
        </el-col>
      </el-col>

      <el-col>
        <el-divider/>
        <p>國際服</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '國際服'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}
            </el-card>
          </template>
        </el-col>
      </el-col>
      <el-col>
        <el-divider/>
        <p>比赛专区</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '比赛专区'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}
            </el-card>
          </template>
        </el-col>
      </el-col>

      <el-col>
        <el-divider/>
        <p>电信一区</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '电信一区'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}
            </el-card>
          </template>
        </el-col>
      </el-col>

      <el-col>
        <el-divider/>
        <p>电信五区</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '电信五区'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}
            </el-card>
          </template>
        </el-col>
      </el-col>

      <el-col>
        <el-divider/>
        <p>电信八区</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '电信八区'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}

            </el-card>
          </template>
        </el-col>
      </el-col>

      <el-col>
        <el-divider/>
        <p>缘起大区</p>
        <el-col style="display: flex;justify-content: flex-start;flex-wrap: wrap">
          <template v-for="server in  serverList" :key="server.server_name">
            <el-card class="server-box" v-if="server.zone_name === '缘起大区'">
              <div class="state_green" v-if="server.heat === '6'"></div>
              <div class="state_yellow" v-if="server.heat === '7'"></div>
              <div class="state_red" v-if="server.heat === '8'"></div>
              <div class="state_null" v-if="server.heat === '3'"></div>
              {{ server.server_name }}
            </el-card>
          </template>
        </el-col>
      </el-col>
    </el-col>


  </div>
</template>

<script>
import {j3api} from "@/axios/j3http";

export default {
  name: "ServerMonitorPage",
  data() {
    return {
      serverList: []
    }
  },
  async mounted() {
    // console.log(123)
    await j3api.getServerState().then(res => {
      console.log(res);
      this.serverList = res
    })
  }
}
</script>

<style scoped>

</style>
